<div class="col-mg-12" style="text-align: center;margin-bottom: 30px;">
    <h3>编辑文章</h3>
</div>

<div class="col-xs-12">
    <div class="form-group col-sm-12">
        <label for="password" class="col-sm-1 control-label">文章标题</label>
        <div class="col-sm-10">
            <input type="text" id="title" name="title" class="col-sm-12" value="<?=$data['title']?>" />
        </div>
    </div>

    <div class="form-group col-sm-12">
        <label for="password" class="col-sm-1 control-label">发布时间</label>
        <div class="col-sm-5">
            <div class="input-group col-sm-10">
                    <span class="input-group-addon">
                        <i class="fa fa-calendar bigger-110"></i>
                    </span>
                <input class="form-control active col-sm-12" type="text" name="publish_time" value="<?= date("Y-m-d H:i", $data['publish_time'])?>" id="publish_time" readonly="readonly">
            </div>
        </div>
        <label for="password" class="col-sm-1 control-label">分类选择</label>
        <div class="col-sm-3">
            <select name="type" id="type">
                <option value="1" <?=$data['type'] == 1 ? 'selected="selected"' : ""?> >PHPer</option>
                <option value="2" <?=$data['type'] == 2 ? 'selected="selected"' : ""?>>Think</option>
                <option value="3" <?=$data['type'] == 3 ? 'selected="selected"' : ""?>>GoodLife</option>
            </select>
        </div>
    </div>

    <div class="form-group col-sm-12">
        <label for="password" class="col-sm-1 control-label">内容提要</label>
        <div class="col-sm-10">
            <textarea id="pre_content" name="pre_content" class="col-sm-12" style="resize:none;height: 100px;"><?=$data['pre_content']?></textarea>
        </div>
    </div>

    <div class="form-group col-sm-12">
        <label for="password" class="col-sm-1 control-label">头图展示</label>
        <div class="col-sm-10">
            <form enctype="multipart/form-data" id="head_img">
                <input name="file" id="file" type="file" >
            </form>
            <img class="head_image <?=empty($data['headimage']) ? 'hidden' : ''?>" src="<?=$data['headimage']?>" style="width: 300px;">
        </div>
    </div>

    <div class="form-group col-sm-12">
        <label for="password" class="col-sm-1 control-label">&nbsp;</label>
        <div class="col-sm-10">
            <input type="text" id="head_img_url" name="head_img_url" value="<?=$data['headimage']?>" class="col-sm-12" />
        </div>
    </div>

    <div class="form-group col-sm-12">
        <label for="password" class="col-sm-1 control-label">文章内容</label>
        <div class="col-sm-10">
            <!-- editor -->
            <!-- 加载编辑器的容器 -->
            <!-- 标签中为预览内容 -->
            <script id="container" name="content" type="text/plain">
                <?=$data['content']?>
            </script>
        </div>
    </div>

    <div class="form-group col-sm-7 center">
        <button type="button" class="btn btn-primary btn-sm" onclick="saveInfo();">保存</button>
    </div>
</div>

<!-- form.js -->
<script type="text/javascript" src="<?=STATIC_URL?>/bootstrap/js/jquery.form.js"></script>

<!-- 配置文件 -->
<script type="text/javascript" src="<?=STATIC_URL?>/ueditor/ueditor.config.js"></script>
<!-- 编辑器源码文件 -->
<script type="text/javascript" src="<?=STATIC_URL?>/ueditor/ueditor.all.js"></script>
<!-- 实例化编辑器 -->
<script type="text/javascript">
    var ue = UE.getEditor('container', {
        serverUrl: "/server/ueditor",
        // paragraph
        // 段落格式 值留空时支持多语言自动识别，若配置，则以配置值为准
        paragraph:{'p': 'p', 'h1':'h1', 'h2':'h2', 'h3':'h3'},
        fontfamily : [{ label:'微软雅黑',name:'yahei',val:'微软雅黑, Microsoft YaHei'}],
        lineheight : ['1.75'],
        autoHeightEnabled: false,
        initialFrameHeight: 300
    });

    var ajaxUrl = '/article/save';
    $(function(){
        $('#publish_time').datetimepicker({
            format: 'YYYY-MM-DD HH:mm',
            language: 'zh-CN',
            startView: true,
            pickDate: true,
            pickTime: true,
            hourStep: 1,
            minuteStep: 15,
            secondStep: 30,
            inputMask: true,
        });

        $("#file").change(function(){
            $("#head_img").ajaxSubmit({
                url : "/server/file/upload",
                success : function(data){
                    $("#head_img_url").val(data.data.url);
                    $("img.head_image").attr('src', headImgUrl).removeClass("hidden");
                }
            });
        });
    });

    function saveInfo() {
        var title = $('input[name=title]').val();
        var content = ue.getContent();
        var publish = $("#publish_time").val();
        var type = $("#type").val();
        var preContent = $("#pre_content").val();
        var headImgUrl = $("#head_img_url").val();

        if (title.length <= 0 || content.length <= 0){
            alert("标题与内容不能为空");
            return false;
        }

        var postData = {
            id : "<?=$data['id']?>",
            title : title,
            content : content,
            type : type,
            publish : publish ? publish : false,
            headimage : headImgUrl,
            pre_content : preContent
        };
        $.ajax({
            type : "POST",
            url  : ajaxUrl,
            data : postData,
            dataType : "json",
            success : function(res) {
                console.log(res);
                if (res.status != 200) {
                    alert(res.msg);
                    return false;
                } else {
                    alert("文章保存成功!")
                    window.location.reload();
                }
            }
        });
    }
</script>
